<template>
	<view class="container">
		<view class="content">
			<rich-text :nodes="formatRichText(info.content)"></rich-text>
			<view class="infoB">
				<view class="left">
					发布时间：{{info.createtime}}
				</view>
				<view class="right">
					来源：{{info.source}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { newsDetails } from '@/api/news.js'
	import config from '@/config'
	export default {
		data() {
			return {
				imgUrl:config.baseUrl,
				info:{},
				id:""
			}
		},
		onLoad(options) {
			this.getDetails(options.id)
		},
		methods: {
			// 查看详情
			getDetails(id) {
				newsDetails(id).then((res) => {
					if(res.code==200){
						this.info = res.data
					}
				  })
			},
			
			formatRichText(html) {
　　　　　　　　　// html 就是你要传进来地富文本参数
				// 去掉img标签里的style、width、height属性
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				// 去掉<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
　　　　　　　　　　// 返回 处理后地结果
				return newContent;
			},
		}
	}
</script>

<style>
	.container{
		width: 100%;
	}
	
	.content{
		padding: 20rpx 40rpx;
		height: 100%;
		background-color: #fff;
		margin: 0 auto;
		font-size: 27rpx;
		line-height: 45rpx;
	}
	
	.infoB{
		font-size: 22rpx;
		color: #b9b9b9;
		display: flex;
		border-top: 1px solid #ddd;
		margin-top: 10rpx;
	}
	
	.right{
		margin-left:auto;
	}
</style>